<template>
	<view>
		<u-popup :show="show" @close="closePop" closeable closeOnClickOverlay>
			<view class="comment-pop-box">
				<view class="comment-pop-title">
					共{{total}}条评论
					<view class="close-btn" @click="closePop"></view>
				</view>
				<view class="comment-pop-scroll">
					<template v-if="isLoading">
						<view class="el-flex" style="height: 60vh;">
							<u-loading-icon size='50'></u-loading-icon>
						</view>
					</template>
					<template v-else>
						<view class="comment-pop-list">
							<template v-if="comment_list.length==0">
								<view class="comment-pop-empty">
									暂时还没有评论哦
								</view>
							</template>
							<template v-else>
								<scroll-view style="height: 60vh;" scroll-y="true" @scrolltolower="scrolltolower">
									<view class="comment" v-for="(item,index) in comment_list" :key="index">
										<view class="comment-avatar">
											<image :src="item.img" mode=""></image>
										</view>
										<view class="comment-content">
											<view class="comment-info">
												<view class="comment-info-l">
													<view class="comment-user">
														<text class="name">
															{{item.nickname}}
														</text>
														<text class="time">
															{{item.create_time|formatRelativeTime}}
														</text>
														<text class="time">
															{{item.belong_place}}
														</text>
													</view>
													<view class="comment-text">
														{{item.comment}}
													</view>

												</view>
												<view class="comment-praise">
													<text class="num"
														v-if="item.praise_num!=0">{{item.praise_num}}</text>
													<image src="../../static/images/m_b_praisa.png" mode=""></image>
													</image>
												</view>
											</view>
											<view class="comment-discuss" v-if="item.second_comment_list.length!==0">
												<view class="comment-discuss-item"
													v-for="(i,j) in item.second_comment_list" :key="j">
													<view class="p">
														<text class="name">
															{{i.nickname}}
														</text>
														<text class="reply" v-if="i.reply_nickname"
															style="margin: 0px 0.05rem; color: rgb(51, 51, 51);">回复</text>
														<text class="name"
															v-if="i.reply_nickname">{{i.reply_nickname}}</text>
														<text class="name" style="margin: 0 .05rem;">
															:
														</text>
														<text class="text">{{i.comment}}</text>
													</view>
													<view class="p">
														<text class="name">
															{{i.belong_place}}
														</text>
													</view>
												</view>
												<view class="comment-discuss-more"
													v-if="item.sec_comment_num&&item.sec_comment_num>3">
													展开更多{{item.sec_comment_num-3}}条回复
												</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</template>
						</view>
					</template>
				</view>
				<view class="comment-pop-footer">
					<view class="comment-pop-input">
						<image src="../../static/images/write.png" mode=""></image>
						来说点什么...
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import formatRelativeTime from '../../common/js/formatRelativeTime.js'
	export default {
		name: "popComment",
		props: {
			show: {
				type: Boolean,
				default: false
			},
			total: {
				type: [String, Number],
				default: 0
			},
			product_id: {
				type: [String, Number],
				default: ''
			},
			comment_type: {
				type: [String],
				default: ''
			},
		},
		filters: {
			formatRelativeTime: formatRelativeTime
		},
		data() {
			return {
				comment_list: [],
				page_index: 1,
				last_id: '',
				isLoading: false,
				loadAll: false
			};
		},
		watch: {
			show: {
				handler(newVal) {
					if (newVal) {
						this.isLoading = true
						this.getMizoneOtherCommentList()
					}
				},
				immediate: true
			}
		},
		methods: {
			closePop() {
				this.$emit('closePop')
				this.last_id = ''
			},
			scrolltolower() {
				if (this.loadAll) return;
				this.page_index++
				this.getMizoneOtherCommentList(true)
			},
			getMizoneOtherCommentList(flag) {
				this.$request.get('/getMizoneOtherCommentList', {
					'moment_id': this.product_id,
					'page_index': this.page_index,
					'last_id': this.last_id,
					comment_type: this.comment_type
				}).then((res) => {
					this.last_id = res.data.data.last_id
					let list = res.data.data.comment_list
					if (list.length == 0 || res.data.data.is_end) {
						this.loadAll = true
					}
					if (flag) {
						this.comment_list = this.comment_list.concat(list)
					} else {
						this.comment_list = list
					}
					this.isLoading = false
				}).catch(e => {
					console.log('错误了:', e)
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.comment-pop-empty {
		height: 60vh;
		line-height: 60vh;
		text-align: center;
		color: #999;
	}

	.comment-pop-title {
		padding: 0.3rem 0;
		font-size: .28rem;
		color: #333;
		font-weight: 600;
		text-align: center;

		.close-btn {
			width: 0.32rem;
			height: 0.32rem;
			position: absolute;
			top: 0.3rem;
			right: 0.24rem;
			background: url(../../static/images/close_b.png) 50% no-repeat;
			background-size: 100% 100%;
		}
	}

	.comment-pop-box {
		padding: 0 0.24rem;
		background-color: #fff;
		border-radius: 0.24rem 0.24rem 0 0;
		overflow: hidden;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.comment-pop-footer {
		margin: 0 -0.24rem;
		padding: 0.24rem;
		border-top: 1px solid #f6f6f6;

		.comment-pop-input {
			display: flex;
			align-items: center;
			padding: 0 0.24rem;
			height: 0.66rem;
			line-height: .66rem;
			border-radius: 0.33rem;
			overflow: hidden;
			color: #999;
			background-color: #f6f6f6;

			image {
				margin-right: 0.1rem;
				width: 0.3rem;
				height: 0.3rem;
			}
		}
	}

	.comment-pop-scroll {
		max-height: 60vh;
		overflow: auto;
		min-height: 60vh;

		.comment-pop-list {
			overflow: hidden;

			.comment {
				display: flex;
				align-items: flex-start;
				text-align: left;
				padding-bottom: 0.2rem;

				.comment-avatar {
					margin-right: 0.24rem;
					width: 0.52rem;
					height: 0.52rem;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.comment-content {
					flex: 1;
					padding-bottom: 0.14rem;
					border-bottom: 1px solid #f5f5f5;

					.comment-discuss {
						margin-top: 0.05rem;
						margin-bottom: 0.06rem;
						padding: 0.2rem;
						background: #fafafa;
						border-radius: 0.08rem;
						line-height: 1.4;

						.comment-discuss-item {
							margin-bottom: 0.12rem;
							width: 5.4rem;

							.p {
								line-height: 1.4;

								.name {
									font-size: .26rem;
									color: #999;
								}

								.text {
									font-size: .26rem;
									color: #333;
								}
							}
						}

						.comment-discuss-more {
							display: flex;
							align-items: center;
							color: #999;

							&::after {
								margin-right: 0.06rem;
								content: "";
								display: inline-block;
								width: 0.24rem;
								height: 0.24rem;
								background: url(../../static/images/down.png) 50% no-repeat;
								background-size: 100% 100%;
							}
						}
					}

					.comment-info {
						display: flex;
						align-items: flex-start;

						.comment-info-l {
							flex: 1;

							.comment-user {


								.name {
									font-size: .24rem;
									color: #999;
								}

								.time {
									font-size: .24rem;
									color: #999;

									&:not(:first-child) {
										margin-left: 0.1rem;
									}
								}
							}

							.comment-text {
								margin-top: 0.06rem;
								font-size: .26rem;
								color: #333;
								line-height: 1.6;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}
						}

						.comment-praise {
							display: flex;
							align-items: flex-end;
							color: #999;
							font-size: .2rem;
							font-weight: 500;
							position: relative;

							.num {
								margin-right: 0.04rem;
								position: relative;
								top: -10%;
							}

							image {
								display: inline-block;
								width: 0.29rem;
								height: 0.29rem;
							}
						}
					}
				}
			}
		}

	}
</style>